<template>
	<view style="flex: 1;display: flex;flex-direction: column;">
		<!-- 缅怀英烈动态 -->
		<view class="mh-pmd-view">
			<image class="mh-pmd-img" src="../../static/icon-baizu-laba.png"></image>
			<text class="mh-pmd-tip">献花动态：</text>
			<swiper class="mh-pmd-swiper" :indicator-dots="false"
			 autoplay="true" :interval="1500" :circular="true"
			:duration="500" vertical="true">
				<swiper-item v-for="(item,index) in pmdData" :key="index">
					<text class="mh-pmd-swiper-item">{{item.message}}</text>
				</swiper-item>
			</swiper>
		</view>
		<!--搜索-->
		<view class="mh-search-view">
			<image class="mh-search-input-img" src="../../static/fan_fragment_chat_search.png"></image>
			<input class="mh-search-input" placeholder="点击搜索姓氏" type="text" confirm-type="search"
			 @confirm="searchXing"  @input="onKeyInput"/>
		</view>
		<!-- banner -->
		<view v-if="bannerData.length>0">
			<swiper class="mh-banner" :indicator-dots="false"
			 autoplay="true" :interval="3000" :circular="true"
			:duration="1000">
				<swiper-item v-for="(item,index) in bannerData" :key="index">
					<image class="mh-banner-item" :src="item.url" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 英烈列表 -->
		<view style="flex: 1;flex-direction: column;display: flex;justify-content: center;align-items: center;">
			<image class="mh-title-image" src="../../static/icon-mh-yinglie-title.png"></image>
			<!--姓氏列表-->
			<view class="mh-xingshi-view">
				<view class="mh-xingshi-item"  v-for="(item , index) in selectLieShiData">
					<view class="mh-xingshi-item-img-view">
						<image class="mh-xingshi-item-img" :src="item.photo" mode="scaleToFill"></image>
					</view>
					<text class="mh-xingshi-item-xing">{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../index/request.js';
	export default {
		data() {
			return {
				bannerData:[],
				selectLieShiData:[],
				isSelectZimu:-1,
				pmdData:[
				],
				lieShiList:[
				],
				searchKey:"",
				page:1
			}
		},
		onLoad: function(options) {
			this.getAncestorsRollList()
			this.getMp3List()
			uni.startPullDownRefresh()
		},
		// 下拉刷新
		onPullDownRefresh(){
			this.page=1;
			this.getHeroicList()
		},
		onReachBottom(){
			this.page=this.page+1;
			this.getHeroicList()
		},
		methods: {
			getAncestorsRollList:function(){
				var that=this
				request.post("api/common/ancestors_rolllist", {
					lave: "4"
				}).then(data => {
					that.pmdData=data
				})
			},
			getYingLieSearch:function(){
				var that=this
				request.post("api/common/yinglie_search", {
					lave: "4",
					sting:that.searchKey
				}).then(data => {
					console.log("getYingLieSearch",JSON.stringify(data))
					for (var i = 0; i < that.selectLieShiData.length; i++) {
						that.selectLieShiData.splice(i)
					}
					that.lieShiList=data
					that.lieShiList.forEach(item => {
						that.selectLieShiData.push(item)
					})
				})
			},
			getHeroicList:function(){
				var that=this
				request.post("api/common/GetHeroicList", {
					page: this.page
				}).then(data => {
					uni.stopPullDownRefresh()
					if(this.page==1){
						for (var i = 0; i < that.selectLieShiData.length; i++) {
							that.selectLieShiData.splice(i)
						}
					}
					that.lieShiList=data
					that.lieShiList.forEach(item => {
						that.selectLieShiData.push(item)
					})
					
				})
			},
			getMp3List:function(){
				var that=this
				request.post("api/common/getwebset", {
				}).then(data => {
					that.bannerData=data.HeroicTopPic
				})
			},
			onKeyInput:function(event) {
				this.searchKey = event.target.value
			},
			searchXing:function(){
				if(this.searchKey){
					if(this.searchKey.length>2){
						uni.showToast({
							title:"搜索姓氏不能超过两个字符",
							icon:"none"
						})
						return	
					}
					this.getYingLieSearch()
				}else{
					uni.startPullDownRefresh()
				}
			},
		}
	}
</script>

<style>
	@import "index.css";
</style>
